import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { ArrowLeft } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';
import { Tabs } from 'react-vant'
axios.defaults.baseURL = 'http://127.0.0.1:3000'
export default function FollowUp() {
  const navigate = useNavigate()
  const [data, setData] = useState([])
  const [list, setList] = useState([])
  useEffect(() => {
    getlist()
    getlists()
  }, [])
  const getlist = async () => {
    let { data: { data } } = await axios.get('/getstatus')
    setData(data)
  }
  const getlists = async () => {
    let { data: { data } } = await axios.get('/getfollowUp')
    setList(data)
  }
  return (
    <div>
      <p style={{ padding: '7px', width: '100%', lineHeight: '40px', display: 'flex', alignItems: 'center', fontSize: '23px', borderBottom: '1px solid #CECECE' }}> <ArrowLeft onClick={() => { navigate('/home') }} />复诊开药</p>
      <Tabs defaultActive={1} color='#0079FE' lineWidth='100px' >
        {data.map(item => (
          <Tabs.TabPane titleStyle={{ fontSize: '15px' }} key={item._id} title={`${item.name}`}>
            {
               (list.filter(i => i.sid._id === item._id)).map(z => {
                  return <div key={z._id} onClick={()=>{navigate(`/followupdetails/${z._id}`)}}>
                    <div style={{ width: '90%', margin: '0 auto',borderBottom: '1px solid #CECECE', padding: '10px 0' }}>
                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-around' }} >
                        <img src="./10.png" alt="" />
                        <span>{z.patientname}</span>
                        <span style={{ fontSize: '12px', color: '#9999A6' }}>{z.patientsex}</span>
                        <span style={{ fontSize: '12px', color: '#9999A6' }}>{z.patientage}</span>
                        <span style={{ color: 'red' }}>{z.sid.name}</span>
                      </div>
                      <p style={{ margin: '0 auto', marginTop: '10px', marginLeft: '10px', color: '#9999A6', fontSize: '15px', lineHeight: '20px' }}>病情描述：
                        <span style={{ marginLeft: '10px' }} >{z.content}</span>
                      </p>
                    </div>
                    <p style={{ color: '9999A6', display: 'flex', justifyContent: 'flex-end', marginRight: '20px' }}>20分钟前</p>
                  </div>
              })
            }
          </Tabs.TabPane>
        ))}
      </Tabs>
    </div >
  )
}
